import React, {Component} from 'react';
import PropTypes from 'prop-types'
import {Card, WingBlank, WhiteSpace, Flex,Icon} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import './MessageHandle.css';

class MessageHandle extends Component {
    static propTypes ={
        message:PropTypes.object.isRequired
    }
    
    render(){
        const {message} = this.props
        if(message.fromWho)//假如是自己发的消息
            return(
                <div>
                <WingBlank size="lg">
            <WhiteSpace size="lg" />
                <Flex justify="end">          
                <div className = "my-card">
                    {message.text}
                </div>
                <img align = "center" className="avatar" src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544891607335&di=e45979be27a8ab3f921436dfaf8ae05c&imgtype=0&src=http%3A%2F%2Fupload-images.jianshu.io%2Fupload_images%2F13133049-783656827a33a385.png"/>
                </Flex>
            </WingBlank>
                
                </div>
                )
        else
            return(
                <div>
                <WingBlank size="lg">
            <WhiteSpace size="lg" />
                <Flex justify="start">
                <img align = "center" className="avatar" src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544891607335&di=e45979be27a8ab3f921436dfaf8ae05c&imgtype=0&src=http%3A%2F%2Fupload-images.jianshu.io%2Fupload_images%2F13133049-783656827a33a385.png"/>
                
                <div className = "friend-card">
                    {message.text}
                </div>
                </Flex>
            </WingBlank>
                
                </div>
            )
    }
}

export default MessageHandle